<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont icon-left"></div>
    </div>
    <div class="header-input">
      <input class="input" placeholder="请输入搜索内容"/>
    </div>
    <div class="header-right">
      <div>城市</div>
      <div class="iconfont icon-down"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .header
    display: flex;
    height 0.86rem;
    align-items center;
    background-color $bgColor;
    .header-left
      width .64rem;
      text-align center
      color #FFF
    .header-input
      width 4.9rem
      .input
        width 4.6rem
        height 0.6rem;
        padding-left 0.2rem
        line-height 0.6rem;
        background #FFF;
        border-radius 0.1rem
    .header-right
      width 1.24rem
      text-align center
      color #fff
      display flex
      margin-left 0.1rem
</style>
